<!--管理员登录-->

#include('../head.html', {title : '登录'})
<body class="bg-info">
<section id="content" class="m-t-lg wrapper-md animated fadeInUp">
  <div class="container aside-xl">
    <a class="navbar-brand block" href="signin"><span class="h1 font-bold">Administrator</span></a>
    <section class="m-b-lg">
      <header class="wrapper text-center">
        <strong>实验室成员管理系统</strong>
      </header>

      <style>
        . {
          width:800px;
          font-family:'黑体';
          margin:50px auto;
          margin: 0%;
          padding: 0%;
        }

        #mm,#yx,#yzm1{
          font-size: 12px;
          color: #FAF5FF;
          padding-left: 20px;
          display: block;
          text-align: center;
        }
        .wrong{
          background:url(/static/images/wrong.png) no-repeat  4px 3px;
          /*border: 1px solid #FFAC91;*/
          border: hidden;
          height:32px;
          line-height:32px;
          color:#FF0000 !important;
        }
        /*.fwrong{*/
          /*border-radius: 500px;*/
          /*border:1px solid red;*/
          /*border-color: transparent;*/
          /*border-width: 0;*/
          /*height: 45px;*/
          /*padding: 10px 16px;*/
          /*font-size: 18px;*/
          /*line-height: 1.33;*/
        /*}*/
        /*.fright{*/
          /*border:1px solid skyblue;*/
          /*border-color: transparent;*/
          /*border-width: 0;*/
          /*height: 45px;*/
          /*padding: 10px 16px;*/
          /*font-size: 18px;*/
          /*line-height: 1.33;*/
          /*border-radius: 500px;*/
        /*}*/
        .right{
          /*color: #5EFF5E !important;*/
          background:url(/static/images/right.png) no-repeat 4px 3px;
          /*border: 1px solid #ACFFAC;*/
          height:32px;
          border: hidden;
          line-height:32px;
        }
        .form-group .default{
          width:200px;
          height:32px;
          line-height:32px;
          color:#999;
        }
      </style>
      <script type="text/javascript">
        function check1() {
            var a=document.getElementById('username').value;
            if(a.length>18||a.length<1){
                document.getElementById('yx').className="wrong";
                document.getElementById('yx').innerHTML="用户名输入有误";
            }
            else{
                document.getElementById('yx').className="right";
                document.getElementById('yx').innerHTML="正确";
            }
        }
        function check2() {
            var a=document.getElementById('mima').value;
            var reg = /^.*[~!@#\$%\^&\*\(\)_+\-=\[\]\{\}\\\|\'\";:,\<\.\>\/\?\s+].*$/;
            var regNumber = /\d+/; //验证0-9的任意数字最少出现1次。
            var regString = /[a-zA-Z]+/; //验证大小写26个字母任意字母最少出现1次。
            if(a==''||a==null){
                document.getElementById('mm').innerHTML="密码不能为空";
                document.getElementById('mm').className="wrong";
            }
            else if(a.length<4||a.length>16){
                document.getElementById('mm').innerHTML="密码长度要大于4个字符并且小于16个字符";
                document.getElementById('mm').className="wrong";
            }
            else if(!(regNumber.test(a) && regString.test(a) || reg.test(a))){
                document.getElementById('mm').className="wrong";
                document.getElementById('mm').innerHTML="密码中要包含字符、数字.可包含特殊符号！";
            }
            else{
                document.getElementById('mm').className="right";
                document.getElementById('mm').innerHTML="正确";
            }

        }
      </script>

      <form action="/backstage/backstage_login" method="post" name="myform">
        <div class="form-group">
          <input type="text" name="username" placeholder="用户名" id="username" onblur="check1()" class="form-control rounded input-lg text-center no-border">
          <span class="default" id="yx">请输入用户名</span>
        </div>
        <div class="form-group">
          <input type="password" name="password" placeholder="密码" id="mima" onblur="check2()" class="form-control rounded input-lg text-center no-border">
          <span class="default" id="mm">请输入4 ~ 16位的密码</span>
        </div>
        <div class="input-group form-group">
          <input type="text" name="yzm" placeholder="验证码" id="yzm" class="form-control rounded input-lg text-center no-border">
          <span class="input-group-addon" id="vcode"  style="border-bottom-right-radius: 50px;border-top-right-radius: 50px;"><img src="/static/images/yzm.jpg" id="yanzhengma" ></span>
        </div>
        <div class="form-group">
          <span class="default" id="yzm1" style="margin-top: -15px;">请输入验证码</span>
        </div>
        <button type="button" class="btn btn-lg btn-warning lt b-white b-2x btn-block btn-rounded"><i class="icon-arrow-right pull-right"></i><span class="m-r-n-lg">登录</span></button>
        <div class="text-center m-t m-b"><a href="#" class="forgot"><small>忘了密码?</small></a></div>
        <div class="line line-dashed"></div>
      </form>
        <input id="uri" type="hidden" value="${uri}">
    </section>
  </div>
</section>
#include('../footer.html')
#include('../js.html')
<script>
  var icode=0;
  $("#yanzhengma").attr("src", "/static/images/yzm.jpg?temp=" + Math.random());
  $(".btn-rounded").click(function(){
      check1();
      check2();
      var uri=$("#uri").val();
      if(uri=="/backstage/signin"||uri==""||uri=="/backstage/backstage_logout")
        uri = "/backstage";
      if($("#yx").hasClass("right")&&$("#mm").hasClass("right")){
          <!--myform.submit();-->
          $.ajax({
              url:"/backstage/backstage_login",
              dataType:"json",
              type:"post",
              data:$("form").serialize(),
              success:function(result){
                  <!--console.log(result);-->
                  if(result.tips=="1")
                      window.location.href=uri;
                  else
                       alert(result.tips);
              },
              error:function(result){
                  alert("系统繁忙！");
               }
          });
          icode=icode+1;
          if(icode>=3){
            $.ajax({
                url: "/vcode",
                success: function (result) {
                    $("#yanzhengma").attr("src", "/static/images/yzm.jpg" + "?temp=" + Math.random());
                    icode=0;
                }
            });
          }
      }
  });
  $("#vcode").click(function () {
      $.ajax({
          url: "/backstage/signin",
          success : function (result) {
              $("#yanzhengma").attr("src", "/static/images/yzm.jpg"+"?temp=" + Math.random());
              icode=0;
          }
      })
  });

  $(".forgot").click(function(){
      alert("请联系超级管理员哦~");
  });
</script>
</body>
</html>